<template>
  <div class="inspect-log-type zlst-page">
    <Breadcrumb class="panel-bread">
      <BreadcrumbItem href="/home/inspection/log-panel">巡检日志</BreadcrumbItem>
    </Breadcrumb>
    <div class="inspect-table">
      <Spin v-if="loading" class="spin"></Spin>
      <Table v-if="!loading" :columns="columns" :data="typeLogList">{}</Table>
      <Page :total="totalNum"
        v-if="!loading"
        class="page-right"
        :current.sync="page"
        :show-total="true"
        :show-sizer="true"
        :show-elevator="true"
        :page-size="row"
        :page-size-opts="pageSizeList"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange" >
      </Page>
    </div>
  </div>
</template>

<script>
import Fetch from '@/api/request'
export default {
  name: 'InspectLogType',
  data() {
    return {
      typeLogList: [],
      page: 1,
      row: 20,
      pageSizeList: [10, 20, 30, 50],
      totalNum: 20,
      columns: [{
        type: 'index',
        align: 'center',
        width: 60
      }, {
        title: '巡检类型',
        key: 'inspectTypeName',
        width: 150
      }, {
        title: '巡检时间',
        key: 'inspectTime',
        width: 200
      }, {
        title: '巡检评分',
        key: 'recordValue',
        width: 100
      }, {
        title: '巡检结果',
        key: 'inspectResult',
        width: 100,
        render: (h, params) => {
          if (params.row.inspectResult === '健康') {
            return h('span', {
              style: {
                color: '#65beb2'
              }
            }, '健康')
          } else if (params.row.inspectResult === '亚健康') {
            return h('span', {
              style: {
                color: '#ff9900'
              }
            }, '亚健康')
          } else if (params.row.inspectResult === '异常') {
            return h('span', {
              style: {
                color: '#e45049'
              }
            }, '异常')
          }
        }
      }, {
        title: '巡检详情',
        render: (h, params) => {
          return h('span', params.row.inspectDetail || '-')
        }
      }, {
        title: '操作',
        width: 100,
        render: (h, params) => {
          return h('Button', {
            props: {
              type: 'primary',
              size: 'small',
              shape: 'circle'
            },
            style: {
              marginRight: '5px',
              width: '50px'
            },
            on: {
              'click': () => {
                this.$router.push({path: '/home/inspection/log', query: {typeId: this.$route.query.typeId, typeName: this.$route.query.typeName, inspectRecordId: params.row.inspectRecordId}})
              }
            }
          }, '详情')
        }
      }],
      loading: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化页面
    init() {
      this.page = 1
      this.row = 20
      this.getDate()
    },
    // 获取日志类型列表
    getDate() {
      Fetch.get({
        url: '/api/inspect/logTypeList',
        params: {typeId: this.$route.query.typeId, page: this.page, row: this.row},
        done: () => {
          this.loading = false
        }
      }).then((data) => {
        this.typeLogList = data.data.content
        this.totalNum = data.data.totalElements
      })
    },
    pageChange(params) {
      this.page = params
      this.getDate()
    },
    pageSizeChange(params) {
      this.page = 1
      this.row = params
      this.getDate()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.inspect-log-type {
  padding: 20px;
  background-color: #fff;
}
.panel-bread {
    margin-bottom: 15px;
    padding: 6px 15px 6px 0;
    border-bottom: 1px solid #eee;
  }
  .inspect-table /deep/ {
    .spin {
      margin: auto;
      padding: 60px;
      .ivu-spin-main {
        display: inline-block;
      }
    }
  }
</style>
